<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <!-- <Avatar :src="userAvator"/> -->
      您好 {{getName()}}
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="logout">退出登录</DropdownItem>
        <DropdownItem name="edti">个人资料</DropdownItem>
        <!-- <DropdownItem name="enterprise" v-if="_checkRole(allRoles_.manager)">企业信息</DropdownItem> -->
        <DropdownItem name="password" v-if="_checkRole(allRoles_.manager)">修改密码</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <UpdateUser v-if="editModal" :user="user" @cancel="onModalCancel" @success="editCallBack" :title="title.edit"/>
    <ModfiyPassword v-if="modfyPasswordModal" :user="user" @cancel="onModalCancel" @success="mdifySuccess"  :title="title.password" :type="type"/>
    <Enterprise v-if="modfyEnterpriseModal"   :user="user" @cancel="onModalCancel" @success="mdifySuccess" />
  </div>
</template>

<script>
import "./user.less"
import { mapActions } from "vuex"
import UpdateUser from "@/view/system/user/components/update.vue"
import ModfiyPassword from "@/view/system/user/components/reset-password.vue"
import Enterprise from "@/view/system/enterprise/components/edit.vue"
import { checkRole, allRoles } from "@/libs/util";

export default {
  name: "User",
  props: {
    userAvator: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      allRoles_:allRoles,
      editModal: false,
      modfyPasswordModal: false,
      modfyEnterpriseModal:false,
      user: this.getUser()
      ,title:{
        password:"修改密码",
        edit:"个人资料"
      },
      type:"my"
    };
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    handleClick(name) {
      switch (name) {
        case "logout":
          this.handleLogOut().then(() => {
          //  window.location.href="/login";
           window.location.href="index.html#/login";
          });
          break;
        case "edti":
          this.editModal = true;
          break;
        case "password":
          this.modfyPasswordModal = true;
          break;
           case 'enterprise':
          this.modfyEnterpriseModal = true;
          break;
      }
    },
    getUser() {
      var obj = JSON.parse(sessionStorage.getItem("user"));
      var roleNames = [];
      var roles = obj.roles;
      if (roles) {
        roles.forEach(k => {
          roleNames.push(k.name);
        });
      }
      return {
        id: obj.id,
        name: obj.name,
        rolesNames: roleNames
      };
    },
    getName() {
      var obj = JSON.parse(sessionStorage.getItem("user"));
      return obj["name"];
    },
    editCallBack(obj) {
      var sessionObj = JSON.parse(sessionStorage.getItem("user"));
      if (obj.name != sessionObj.name) {
        sessionObj.name = obj.name;
        sessionStorage.setItem("user", JSON.stringify(sessionObj));
        this.user = this.getUser();
      }
    },
    onModalCancel(type) {
      switch (type) {
        case "edit":
          this.editModal = false;
          break;
        case "reset":
          this.modfyPasswordModal = false;
          break;
          case 'enterprise':
          this.modfyEnterpriseModal = false;
          break;
      }
    },mdifySuccess(){
      this.handleClick("logout");
    },_checkRole(role){
      return checkRole(role);
    }
  },
  components: {
    // AddUser,UpdateUser,
    UpdateUser,
    ModfiyPassword,
    Enterprise
  },created:function(){
  }
};
</script>
